<!--
 * @Author: caofujun
 * @Date: 2020-11-17 18:57:14
 * @Description: 操作日志记录
-->
<template>
  <div>
    <el-dialog
      title="操作日志"
      :visible.sync="dialogVisible"
      @close="closeCallBack"
    >
      <div>
        <el-table :data="crud.data.list" style="width: 100%">
          <el-table-column prop="createTime" label="操作时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="操作人" />
          <el-table-column prop="content" label="操作内容" />
          <el-table-column prop="originalValue" label="原值">
            <template slot-scope="scope">
              <span>{{ scope.row.originalValue | formatMoney(2, true) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <crudPagination crud-tag="loggertable" />
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import CRUD, { presenter, crud } from '@crud/crud'

import crudPagination from '@crud/Pagination'

import checkPermission from '@/utils/permission'

export default {
  name: 'LoggerTable',
  components: {
    crudPagination
  },
  mixins: [presenter(), crud()],
  cruds() {
    return CRUD({
      tag: 'loggertable',
      title: '操作记录',
      url: 'admin/activity/invite/reward/config/record/list',
      query: { userId: 0 }
    })
  },

  props: {
    loggerTableVisible: {
      type: Boolean,
      default: false
    },
    loggerTableParame: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  watch: {
    loggerTableVisible(newVal) {
      this.dialogVisible = newVal
      if (newVal) {
        this.crud.query = { ...this.crud.query, ...this.loggerTableParame }
        this.crud.toQuery()
      }
    }
  },
  methods: {
    closeCallBack() {
      this.$emit('close-logger-visible')
    },
    [CRUD.HOOK.beforeRefresh](crud) {
      return checkPermission(['admin', 'activity/invite/reward/config/record/list'])
    }
  }

}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog{
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    /*height:600px;*/
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
}
/deep/ .el-dialog .el-dialog__body{
    flex:1;
    overflow: auto;
}
</style>
